<template>
    <view class="container">
        <!-- 消息列表 -->
        <scroll-view class="message-scroll" scroll-y @scrolltolower="onLoadMore" refresher-enabled
            :refresher-triggered="refreshing" @refresherrefresh="onRefresh">
            <view class="message-list">
                <view v-for="message in messageList" :key="message.id" class="message-item"
                    :class="{ 'unread': !message.is_read }" @click="onMessageClick(message)">

                    <!-- 用户信息区域 -->
                    <view class="user-section">
                        <image :src="getAvatarPath(message.user?.avatar)" class="user-avatar" mode="aspectFill" />
                        <text class="username">{{ message.user?.nickname || '未知用户' }}</text>
                    </view>

                    <!-- 消息内容区域 -->
                    <wd-text :text="message.content" :lines="2" size="14px" color="616161"></wd-text>

                    <!-- 帖子板块区域 -->
                    <view v-if="message.post && (message.type === 1 || message.type === 2 || message.type === 3)"
                        class="post-section">
                        <view class="post-content">
                            <text class="post-title" v-if="message.type === 3">回复了你的帖子：{{
                                getPostDisplayText(message.post) }}</text>
                            <text class="post-title" v-else>{{ getPostDisplayText(message.post) }}</text>
                        </view>
                        <image v-if="getPostCoverImage(message.post)" :src="getPostCoverImage(message.post)"
                            class="post-cover" mode="aspectFill" />
                    </view>

                    <!-- 时间区域 -->
                    <view class="time-section">
                        <text class="message-time">{{ formatRelativeTime(message.created_at) }}</text>
                    </view>

                    <!-- 未读标识 -->
                    <view v-if="!message.is_read" class="unread-dot"></view>
                </view>
            </view>

            <!-- 加载更多 -->
            <view v-if="loading" class="loading-more">
                <text class="loading-text">加载中...</text>
            </view>

            <!-- 没有更多数据 -->
            <view v-if="!hasMore && messageList.length > 0" class="no-more">
                <text class="no-more-text">没有更多消息了</text>
            </view>

            <!-- 空状态 -->
            <wd-status-tip v-if="!loading && messageList.length === 0" image="content" tip="暂无消息" />
        </scroll-view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { baseAPI } from '@/api/index';
import utils from '@/utils/utils.js';
import { formatRelativeTime } from '@/utils/timeFormat.js';

// 页面公共变量
const messageList = ref([]);
const loading = ref(false);
const refreshing = ref(false);
const hasMore = ref(true);
const page = ref(1);
const currentType = ref(''); // 当前消息类型



// 页面生命周期
onLoad((options) => {
    currentType.value = options.type;
    getList(1, true);
});

onShow(() => {
    // 页面显示时刷新数据
    if (messageList.value.length > 0) {
        onRefresh();
    }
});

// 页面公共函数

// 获取头像路径
function getAvatarPath(avatar) {
    return utils.getAvatarPath(avatar);
}

// 获取帖子显示文本
function getPostDisplayText(post) {
    if (!post) return '';

    // 优先显示 title，如果没有则显示 content
    return post.title || post.content || '';
}

// 获取帖子封面图片
function getPostCoverImage(post) {
    if (!post || !post.media || !Array.isArray(post.media) || post.media.length === 0) {
        return null;
    }

    // 取第一张图片作为封面
    const firstMedia = post.media[0];
    return utils.imgPath(firstMedia);
}

// 获取消息类型参数
function getMessageTypes() {
    switch (currentType.value) {
        case 'like_and_favorite':
            return [1, 2]; // 点赞和收藏
        case 'follow':
            return [4]; // 关注
        case 'comment':
            return [3]; // 评论
        default:
            return [];
    }
}

// 获取消息列表
function getList(pageNum = 1, isRefresh = false) {
    if (loading.value) return;

    // 检查是否有有效的消息类型
    if (!currentType.value) {
        console.warn('没有设置消息类型，无法获取消息列表');
        return;
    }

    loading.value = true;

    const types = getMessageTypes();

    // 检查是否获取到有效的消息类型
    if (!types || types.length === 0) {
        console.warn('无效的消息类型，无法获取消息列表');
        loading.value = false;
        uni.showToast({
            title: '消息类型错误',
            icon: 'none'
        });
        return;
    }

    // 如果只有一个类型，使用单个值；如果有多个类型，使用数组
    const typeParam = types.length === 1 ? types[0] : types;

    baseAPI.post('message/getUserMsgList', {
        type: typeParam,
        page: pageNum
    }).then((response) => {
        let allMessages = [];

        if (response.code === 200 && response.result?.list) {
            allMessages = response.result.list;
        }

        if (isRefresh) {
            messageList.value = allMessages;
            page.value = 1;
        } else {
            messageList.value = messageList.value.concat(allMessages);
        }

        // 使用接口返回的 hasMorePages 字段判断是否还有更多数据
        hasMore.value = response.result?.hasMorePages || false;

    }).catch((error) => {
        console.error('获取消息列表失败:', error);
        uni.showToast({
            title: '获取消息失败',
            icon: 'none'
        });
    }).finally(() => {
        loading.value = false;
        refreshing.value = false;
    });
}

// 下拉刷新
function onRefresh() {
    refreshing.value = true;
    page.value = 1; // 重置页码
    getList(page.value, true);
}

// 加载更多
function onLoadMore() {
    if (!hasMore.value || loading.value) return;

    page.value++;
    getList(page.value);
}

// 处理消息点击
function onMessageClick(message) {
    if (!message) {
        console.warn('消息对象为空');
        return;
    }

    // 标记为已读
    if (!message.is_read) {
        baseAPI.post('message/markAsRead', {
            message_id: message.id
        }).then((response) => {
            if (response.code === 200) {
                message.is_read = 1;
            }
        }).catch((error) => {
            console.error('标记已读失败:', error);
        });
    }

    // 根据消息类型跳转到相应页面
    switch (message.type) {
        case 1: // 点赞消息
        case 2: // 收藏消息
        case 3: // 评论消息
            if (message.post && message.post.id) {
                // 跳转到帖子详情
                uni.navigateTo({
                    url: `/pages/post/detail?id=${message.post.id}`
                });
            } else {
                uni.showToast({
                    title: '帖子不存在',
                    icon: 'none'
                });
            }
            break;
        case 4: // 关注消息
            if (message.user && message.user.id) {
                // 跳转到用户主页
                uni.navigateTo({
                    url: `/pages/user/profile?id=${message.user.id}`
                });
            } else {
                uni.showToast({
                    title: '用户不存在',
                    icon: 'none'
                });
            }
            break;
        default: // 系统消息或其他类型
            // 显示消息详情或不做任何操作
            uni.showToast({
                title: '已查看消息',
                icon: 'success'
            });
            break;
    }
}
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f8f9fa;
}

.message-scroll {
    flex: 1;
    height: 0;
}

.message-item {
    background-color: #fff;
    margin: 16rpx 0;
    padding: 32rpx;
    border-radius: 24rpx;
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    position: relative;
    transition: all 0.3s ease;

    &:active {
        background-color: #f8f9fa;
        transform: scale(0.98);
    }

    // 用户信息区域
    .user-section {
        display: flex;
        align-items: center;
        gap: 16rpx;

        .user-avatar {
            width: 80rpx;
            height: 80rpx;
            border-radius: 40rpx;
            flex-shrink: 0;
            background-color: #f5f5f5;
        }

        .username {
            font-size: 32rpx;
            font-weight: 600;
            color: #1a1a1a;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    // 帖子板块区域
    .post-section {
        background-color: #f8f9fa;
        padding: 20rpx;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        gap: 20rpx;

        .post-content {
            flex: 1;
            min-width: 0;

            .post-title {
                font-size: 26rpx;
                color: #333;
                line-height: 1.5;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }

        .post-cover {
            width: 120rpx;
            height: 80rpx;
            border-radius: 12rpx;
            flex-shrink: 0;
            background-color: #f5f5f5;
        }
    }

    // 时间区域
    .time-section {
        .message-time {
            font-size: 24rpx;
            color: #999;
        }
    }

    .unread-dot {
        width: 12rpx;
        height: 12rpx;
        background-color: #ff3b30;
        border-radius: 6rpx;
        position: absolute;
        top: 32rpx;
        right: 32rpx;
    }
}

.loading-more,
.no-more {
    text-align: center;
    padding: 48rpx 32rpx;

    .loading-text,
    .no-more-text {
        font-size: 28rpx;
        color: #999;
    }

    .no-more-text {
        font-size: 26rpx;
        color: #ccc;
    }
}
</style>
